<template>
  <el-row :loading="loading">
    <el-col v-show="blank">
      <ul style="list-style-type: none;margin: 0; padding: 0">
        <li v-for="x in row" class="sea-skeleton" :key="x"></li>
      </ul>
    </el-col>
    <transition name="el-fade-in-linear">
      <el-col v-show="!blank">
        <slot></slot>
      </el-col>
    </transition>
  </el-row>
</template>

<script>
/* eslint-disable */
import Layers from "@/lang/layers";

/**
 * 骨架屏
 * 使用栈格布局，数据为空的时候，显示为骨架屏
 */
export default {
    name: "SeaSkeleton"
    , props: {
        // 行数
        row: {type: Number, default: 3},
        // 是否加载中
        loading: {type: Boolean, default: false},
        // 行数
        data: {type: [Object, Array], default: undefined}
    }
    , computed: {
        /**
         * 数据是否为空
         *
         * @returns {boolean}
         */
        blank: function () {
            return Layers.isBlank(this.data);
        }
    }
}
</script>
